
<template>
  <!--  导航栏-->
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>来料检验</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
<!--  搜素栏-->
  <el-row>
    <el-col :span="24" style="margin-top: 15px">
      <el-form :inline="true"  v-model="incomingQuery">
        <el-form-item label="检验单编号" >
          <el-input placeholder="请输入检测单编号" v-model="incomingQuery.incomingId"></el-input>
        </el-form-item>
        <el-form-item label="供应商编码" >
          <el-input placeholder="请输入供应商编码" v-model="incomingQuery.incomingSupplierId"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" >
          <el-input placeholder="请输入供应商名称" v-model="incomingQuery.incomingSupplierName"></el-input>
        </el-form-item>
        <el-form-item label="产品物料编码" >
          <el-input placeholder="请输入产品物料编码" v-model="incomingQuery.incomingItemId"></el-input>
        </el-form-item>
        <el-form-item label="产品物料名称" >
          <el-input placeholder="请输入产品物料名称" v-model="incomingQuery.incomingItemName"></el-input>
        </el-form-item>
        <el-form-item label="检测结果" >
          <el-select placeholder="请选择检测结果" style="width: 200px" v-model="incomingQuery.incomingMaterialOutcome">
            <el-option label="检验通过" :value="1"></el-option>
            <el-option label="检验未通过" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来料日期" v-model="incomingQuery.incomingDate">
            <el-date-picker
                type="date"
                placeholder="请输入来料日期"
                :size="size"
            />
        </el-form-item>
        <el-form-item label="检测日期" v-model="incomingQuery.materialDate">
          <el-date-picker
              type="date"
              placeholder="请输入检测日期"
              :size="size"
          />
        </el-form-item>
        <el-form-item label="检测人员" >
          <el-select placeholder="请选择检测人员" style="width: 200px" v-model="incomingQuery.materialPerson">
            <el-option label="管理员" :value="1"></el-option>
            <el-option label="非管理员" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadIncominges">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
<!--  工具栏-->
  <el-row>
    <el-col :span="24" style="margin-top: 15px">
      <el-button type="primary" @click="addIncoming">新增</el-button>
      <el-button type="warning" @click="exportIncoming">导出</el-button>
      <el-button type="danger" @click="bathDeleteIncoming">删除</el-button>
      <el-button type="primary" >编辑</el-button>
    </el-col>
  </el-row>
<!--  内容栏-->
  <el-row>
    <el-col :span="24" style="margin-top: 15px">
      <el-table  border stripe :data="incominges" @selection-change="selectIncomings">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="incomingId" width="130px" align="center" label="来料检验单编号"></el-table-column>
        <el-table-column prop="incomingName" width="130px" align="center" label="来料检验单名称"></el-table-column>
        <el-table-column prop="incomingSupplierName" width="130px" align="center" label="供应商简称"></el-table-column>
        <el-table-column prop="supplier.supplierBatch" width="130px" align="center" label="供应商批次号"></el-table-column>
        <el-table-column prop="item.itemId" width="130px" align="center" label="产品物料编码"></el-table-column>
        <el-table-column prop="item.itemName" width="130px" align="center" label="产品物料名称"></el-table-column>
        <el-table-column prop="incomingReceptionCount" width="130px" align="center" label="接受数量"></el-table-column>
        <el-table-column prop="incomingMaterialCount" width="130px" align="center" label="检测数量"></el-table-column>
        <el-table-column prop="incomingOutCount" width="130px" align="center" label="不合格数"></el-table-column>
        <el-table-column prop="incomingMaterialOutcome" width="130px" align="center" label="检测结果">
          <template #default="scope">
            <el-tag v-if="scope.row.incomingMaterialOutcome == 1" type="success">检验通过</el-tag>
            <el-tag v-else type="danger">检验未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="incomingDate" width="130px" align="center" label="来料日期"></el-table-column>
        <el-table-column prop="materialDate" width="130px" align="center" label="检测日期"></el-table-column>
        <el-table-column prop="materialPerson" width="130px" align="center" label="检测人员">
          <template #default="scope">
            <el-tag v-if="scope.row.materialPerson == 1" type="success">管理员</el-tag>
            <el-tag v-if="scope.row.materialPerson == 2" type="danger">非管理员</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="incomingDocumentStatus" width="130px" align="center" label="单据状态">
          <template #default="scope">
            <el-tag v-if="scope.row.incomingDocumentStatus == 1" type="success">草稿</el-tag>
            <el-tag v-if="scope.row.incomingDocumentStatus == 2" type="danger">已确认</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="130px" align="center" label="操作">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="editIncoming(scope.row.incomingId)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteIncoming(scope.row.incomingId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
<!--  分页栏-->
  <el-row style="margin-top: 15px">
    <el-row style="margin-top: 15px">
      <el-col :span="24">
        <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
      </el-col>
    </el-row>
  </el-row>
<!--  新增弹窗-->
  <el-dialog title="新增来料检验单" v-model="newIncomingDialogVisible" width="80%" align-center>
    <el-form :model="newIncoming" label-width="120px" :inline="true">
      <el-form-item label="来料检验单编号">
        <el-input v-model="newIncoming.incomingId" style="width: 240px" ></el-input>
      </el-form-item>
      <el-form-item label="来料检验单名称">
        <el-input v-model="newIncoming.incomingName" style="width: 240px" ></el-input>
      </el-form-item>
    </el-form>
    <el-form>
      <el-text>----------------------------------------------------------------------------------物料与供应商---------------------------------------------------------------------------------------------</el-text>
    </el-form>
    <el-form :model="newIncoming" label-width="120px" :inline="true" style="margin-top: 20px">
      <el-form-item label="产品物料编码">
        <el-input v-model="newIncoming.incomingItemId" style="width: 240px" ></el-input>
      </el-form-item>
      <el-form-item label="产品物料名称">
        <el-input v-model="newIncoming.incomingItemName" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="产品物料单位">
        <el-input v-model="newIncoming.incomingItemUnit" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="供应商编码">
        <el-input v-model="newIncoming.incomingSupplierId" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="供应商简称">
        <el-input v-model="newIncoming.incomingSupplierName" style="width: 200px" ></el-input>
      </el-form-item>
    </el-form>
    <el-form>
      <el-text>----------------------------------------------------------------------------------检测情况---------------------------------------------------------------------------------------------</el-text>
    </el-form>
    <el-form :model="newIncoming" label-width="120px" :inline="true" style="margin-top: 20px">
      <el-form-item label="接受数量">
        <el-input-number v-model="newIncoming.incomingReceptionCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="检测数量">
        <el-input-number v-model="newIncoming.incomingMaterialCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="不合格数量">
        <el-input-number v-model="newIncoming.incomingOutCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="来料日期">
        <el-date-picker v-model="newIncoming.incomingDate" type="date" style="width: 200px" placeholder="请选择来料日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="检测日期">
        <el-date-picker v-model="newIncoming.materialDate" type="date" style="width: 200px" placeholder="请选择检测日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="检验结果">
        <el-radio v-model="newIncoming.incomingMaterialOutcome" :label="1">检验通过</el-radio>
        <el-radio v-model="newIncoming.incomingMaterialOutcome" :label="2">检验不通过</el-radio>
      </el-form-item>
    </el-form>
    <el-form label-width="120px" style="margin-top: 20px">
      <el-form-item label="备注">
        <el-input placeholder="请输入备注" type="textarea" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="newIncomingDialogConfirm">确定</el-button>
        <el-button @click="newIncomingDialogCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
<!--  编辑弹窗-->
  <el-dialog title="编辑来料检验单" v-model="editIncomingDialogVisible" width="80%" align-center>
    <el-form :model="editIncomingById" label-width="120px" :inline="true">
      <el-form-item label="来料检验单编号">
        <el-input v-model="editIncomingById.incomingId" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="来料检验单名称">
        <el-input v-model="editIncomingById.incomingName" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="单据状态">
        <el-radio v-model="editIncomingById.incomingDocumentStatus" :label="1">草稿</el-radio>
        <el-radio v-model="editIncomingById.incomingDocumentStatus" :label="2">已确认</el-radio>
      </el-form-item>
    </el-form>
    <el-form>
      <el-text>----------------------------------------------------------------------------------物料与供应商---------------------------------------------------------------------------------------------</el-text>
    </el-form>
    <el-form :model="editIncomingById" label-width="120px" :inline="true" style="margin-top: 20px">
      <el-form-item label="产品物料编码">
        <el-input v-model="editIncomingById.incomingItemId" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="产品物料名称">
        <el-input v-model="editIncomingById.incomingItemName" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="产品物料单位">
        <el-input v-model="editIncomingById.incomingItemUnit" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="供应商编码">
        <el-input v-model="editIncomingById.incomingSupplierId" style="width: 200px" ></el-input>
      </el-form-item>
      <el-form-item label="供应商简称">
        <el-input v-model="editIncomingById.incomingSupplierName" style="width: 200px" ></el-input>
      </el-form-item>
    </el-form>
    <el-form>
      <el-text>----------------------------------------------------------------------------------检测情况---------------------------------------------------------------------------------------------</el-text>
    </el-form>
    <el-form :model="editIncomingById" label-width="120px" :inline="true" style="margin-top: 20px">
      <el-form-item label="接受数量">
        <el-input-number v-model="editIncomingById.incomingReceptionCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="检测数量">
        <el-input-number v-model="editIncomingById.incomingMaterialCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="不合格数量">
        <el-input-number v-model="editIncomingById.incomingOutCount" style="width: 200px" :min ="1"></el-input-number>
      </el-form-item>
      <el-form-item label="来料日期">
        <el-date-picker v-model="editIncomingById.incomingDate" type="date" style="width: 200px" placeholder="请选择来料日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="检测日期">
        <el-date-picker v-model="editIncomingById.materialDate" type="date" style="width: 200px" placeholder="请选择检测日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="检验结果">
        <el-select style="width: 120px" v-model="editIncomingById.incomingMaterialOutcome">
          <el-option v-for="item in [{label:'未选择',value:''},{label:'检验通过',value:1},{label:'检验不通过',value:2}]" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form style="margin-top: 20px">
      <el-form-item label="备注">
        <el-input placeholder="请输入备注" type="textarea" ></el-input>
      </el-form-item>
    </el-form>
    <el-form>
      <el-text>--------------------------------------------------------------------------------------检测项---------------------------------------------------------------------------------------------</el-text>
    </el-form>
    <el-form>
      <!--  内容栏-->
      <el-row style="margin-top: 15px">
        <el-col :span="24">
          <el-table stripe border style="width: 100%" :data="incomingTestingProjects">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column align="center" prop="testingProjectName" label="检测项名称" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectType" label="检测项类型" width="150">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.testingProjectType == 1">尺寸</el-tag>
                <el-tag type="warning" v-else-if="scope.row.testingProjectType == 2">外观</el-tag>
                <el-tag type="danger" v-else-if="scope.row.testingProjectType == 3">重量</el-tag>
                <el-tag type="info" v-else-if="scope.row.testingProjectType == 4">性能</el-tag>
                <el-tag type="primary" v-else-if="scope.row.testingProjectType == 5">成分</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="testingProjectTool" label="检测工具" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectMethod" label="检测方法" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectStandard" label="标准值" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectUnit" label="单位" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectErrorMax" label="误差上限" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectErrorMin" label="误差下限" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectFatalFlaw" label="致命缺陷数量" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectSevereFlaw" label="严重缺陷数量" width="150"></el-table-column>
            <el-table-column align="center" prop="testingProjectSlightFlaw" label="轻微缺陷数量" width="150"></el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="100">
              <template #default="scope">
                <el-button  size="mini" @click="commonDefectClick">缺陷记录</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
<!--    分页栏-->
      <el-row style="margin-top: 15px">
        <el-col :span="24">
          <el-pagination @change="changePageIncomingTestingProject" background layout="prev, pager, next" :total="totalTestingProject"/>
        </el-col>
      </el-row>
    </el-form>
    <el-form style="margin-top: 20px">
      <el-form-item>
        <el-button type="primary" @click="editIncomingDialogConfirm">确定</el-button>
        <el-button @click="editIncomingDialogCancel">取消</el-button>
      </el-form-item>
    </el-form>
    <!--  常见缺陷弹窗-->
    <el-dialog title="常见缺陷" v-model="commonDefectDialogVisible" width="80%">
      <!--  内容栏-->
      <el-row style="margin-top: 15px">
        <el-col :span="24" >
          <el-table :data="incomingDefeces" border style="width: 100%">
            <el-table-column type="selection" width="55" ></el-table-column>
            <el-table-column prop="defeceName" label="缺陷描述" width="180"></el-table-column>
            <el-table-column prop="defeceType" label="质量检测类型" width="180">
              <template #default="scope">
                {{scope.row.defeceType==1?'尺寸':scope.row.defeceType==2?'外观':scope.row.defeceType==3?'重量':scope.row.defeceType==4?'性能':'成分'}}
              </template>
            </el-table-column>
            <el-table-column prop="defeceLevel" label="缺陷等级" width="180">
              <template #default="scope">
                {{scope.row.defeceLevel==1?'致命缺陷':scope.row.defeceLevel==2?'严重缺陷':'轻微缺陷'}}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--  分页栏-->
      <el-row style="margin-top: 15px">
        <el-col :span="24">
          <el-pagination @change="changePageIncomingDefece" background layout="prev, pager, next" :total="totalIncomingDefece"/>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-button type="primary" @click="commonDefectDialogConfirm">确认</el-button>
      </el-row>
    </el-dialog>
  </el-dialog>
</template>
<script setup>
import {ref,onMounted} from 'vue';
import {useRouter,useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import incomingRequest from "@/api/defece/incoming.js";
import testingProjectRequest from "@/api/defece/testingProject.js";
import defeceRequest from "@/api/defece/defece.js";
// 封装查询对象
let incomingQuery = ref({});
let incominges = ref([]);
let curPage = ref(1);
let total = ref(0);
// 封装新增对象
let newIncoming = ref({});
// 新增弹窗的控制器
let newIncomingDialogVisible = ref(false);
// 编辑弹窗的控制器
let editIncomingDialogVisible = ref(false);
// 封装根据id查询到的检验单数据
let editIncomingById = ref({});
// 封装检测项查询对象
let incomingTestingProjectQuery = ref({});
let incomingTestingProjects = ref([]);
let curPageTestingProject = ref(1);
let totalTestingProject = ref(0);
// 常见缺陷弹窗的控制器
let commonDefectDialogVisible = ref(false);
// 封装常见缺陷查询对象
let incomingDefeceQuery = ref({});
let incomingDefeces = ref([]);
let curPageIncomingDefece = ref(1);
let totalIncomingDefece = ref(0);
// 封装被选择的数据信息的id
let selectedIncomingId = ref([]);
// 获取被选中的数据信息的id
function selectIncomings(queryTable){
  let listIncoming = new Array();
  queryTable.forEach(item=>{
    listIncoming.push(item.incomingId);
    selectedIncomingId.value = listIncoming;
    console.log(selectedIncomingId.value)
  })
}
// 批量删除按钮的点击事件
function bathDeleteIncoming(){
  for (let i=0;i<selectedIncomingId.value.length;i++){
    deleteIncoming(selectedIncomingId.value[i]);
  }
}
// 删除按钮的点击事件
function deleteIncoming(incomingId){
  incomingRequest.loadDeleteIncomingById(incomingId,res=>{
    if (res.code==200){
      ElMessage({
        message: "删除成功",
        type: "success"
      })
    }
    loadIncominges();
  })
}
// 导出按钮的点击事件
function exportIncoming(){
  incomingRequest.loadExportIncoming(incomingQuery.value,curPage.value,10,res=>{
    if (res.code==200){
      ElMessage({
        message: "导出成功",
        type: "success"
      })
    }
  })
}

// 常见缺陷弹窗的确认事件
function commonDefectDialogConfirm(){
  commonDefectDialogVisible.value = false;
}
// 常见缺陷的分页栏设置
function changePageIncomingDefece(value){
  curPageIncomingDefece.value = value;
  loadIncomingDdfeces();
}
// 缺陷记录的点击事件
function commonDefectClick(){
  commonDefectDialogVisible.value = true;
  loadIncomingDdfeces();
}
// 加载常见缺陷项目列表
function loadIncomingDdfeces() {
  defeceRequest.loadDefeces(incomingDefeceQuery.value, curPageIncomingDefece.value, 10, res => {
    totalIncomingDefece.value = res.data.total;
    incomingDefeces.value = res.data.list;
    console.log(incomingDefeces.value)
  })
}
// 加载检测项分页栏
function changePageIncomingTestingProject(value){
  curPageTestingProject.value = value;
  loadTestingProjectIncoming();
}
// 加载检测项列表
function loadTestingProjectIncoming(){
  testingProjectRequest.loadTestingProject(incomingTestingProjectQuery.value,curPageTestingProject.value,10,res=>{
    totalTestingProject.value = res.data.total;
    incomingTestingProjects.value = res.data.list;
    console.log(incomingTestingProjects.value)
  })
}
// 编辑弹窗的确认按钮事件
function editIncomingDialogConfirm(){
  incomingRequest.loadUpdateIncoming(editIncomingById.value,(res)=>{
    if (res.code == 200){
      ElMessage({
        message: "编辑成功",
        type: "success"
      })
    }
    editIncomingDialogVisible.value = false;
    loadIncominges();
  })
}
// 编辑弹窗的取消按钮的点击事件
function editIncomingDialogCancel(){
  editIncomingDialogVisible.value = false;
  editIncomingById.value = {};
}
// 编辑按钮的点击事件
function editIncoming(incomingId){
  incomingRequest.loadSelectIncomingById(incomingId,(res)=>{
    editIncomingById.value = res.data;
    editIncomingDialogVisible.value = true;
    console.log(editIncomingById.value)
  })
  loadTestingProjectIncoming();
}
// 新增按钮的点击事件
function addIncoming(){
  newIncomingDialogVisible.value = true;
}
// 新增弹窗的取消按钮的点击事件
function newIncomingDialogCancel(){
  newIncomingDialogVisible.value = false;
  newIncoming.value = {};
}
// 新增弹窗的确定按钮的点击事件
function newIncomingDialogConfirm(){
  incomingRequest.loadAddIncoming(newIncoming.value,(res)=>{
    if (res.code == 200){
      ElMessage({
        message: "添加成功",
        type: "success"
      })
    }
    console.log(newIncoming.value)
    newIncomingDialogCancel();
    loadIncominges();
  })
}
// 加载项目列表
function loadIncominges(){
  console.log(incomingQuery.value)
  incomingRequest.loadSelectAllIncoming(incomingQuery.value,curPage.value,10,(res)=>{
    total.value = res.data.total;
    incominges.value = res.data.list;
    console.log(incominges.value)
  })
}
// 分页栏
function changePage(value){
  curPage.value = value;
  loadIncominges();

}
onMounted(()=>{
  loadIncominges();
})
</script>
<style scoped>


</style>